<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ref use</title>
</head>
<body>

<div id="test"></div>


<script src="js/react.development.js" crossorigin></script>
<script src="js/react-dom.development.js" crossorigin></script>
<script src="js/babel.js"></script>
<script type="text/babel">
    class Demo extends React.Component {
        // React.createRef() 使用ref方式，官方推荐，但一个myRef只能绑定一个元素
        myRef = React.createRef();
        click = (one) => {
            console.log(one);
            alert(this.input1.value + this.myRef.current.value)
        }

        render() {
            return (
                <div>
                    {/*<input type="text" ref="input1" placeholder="字符串的ref不推荐使用"/>
                     <input type="text" ref={c => this.input1 = c} placeholder="内联回调函数在更新会执行两次（一次清空，一次渲染）"/>
                  */}
                    <input type="text" ref={c => this.input1 = c} placeholder="点击按钮提示数据"/>
                    <button onClick={this.click}>onClick</button>
                    <input type="text" ref={this.myRef} onBlur={this.click.bind(undefined,'传输自定义的参数')} placeholder="失去焦点提示数据"/>
                </div>
            );
        }
    }

    ReactDOM.render(<Demo/>, document.getElementById('test'))
</script>

</body>
</html>